<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:100px;height:100px;background-color: red;border: solid 10px black;}
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>
    
    // console.log( window.getComputedStyle );

    // console.log( window.liyanghaoren );

    // console.log( document.body.currentStyle );


    // 支持某个方法或属性，就是函数或对象，不支持就是undefined

    var box = document.querySelector(".box")

    
    function getStyle(ele, attr){
        // if( ele.currentStyle ){
        //     return ele.currentStyle[attr];
        // }else{
        //     return getComputedStyle(ele)[attr];
        // }

        return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele)[attr];
    }

    console.log( getStyle(box, "width") );
    console.log( getStyle(box, "height") );
    console.log( getStyle(box, "background") );
    console.log( getStyle(box, "border") );
    


</script>
</html>